<template>
  <div class="layout">
    <header class="header">
      <div class="header-content">
        <div class="logo-container">
          <h1>员工管理系统</h1>
        </div>
        <nav class="nav-menu">
          <router-link to="/" custom v-slot="{ navigate, isExactActive }">
            <button class="nav-item" :class="{ active: isExactActive }" @click="navigate">员工管理</button>
          </router-link>
          <router-link to="/tasks" custom v-slot="{ navigate, isExactActive }">
            <button class="nav-item" :class="{ active: isExactActive }" @click="navigate">任务管理</button>
          </router-link>
          <router-link to="/announcements" custom v-slot="{ navigate, isExactActive }">
            <button class="nav-item" :class="{ active: isExactActive }" @click="navigate">公告管理</button>
          </router-link>
          <router-link to="/training-records" custom v-slot="{ navigate, isExactActive }">
            <button class="nav-item" :class="{ active: isExactActive }" @click="navigate">培训记录</button>
          </router-link>
          <router-link to="/performances" custom v-slot="{ navigate, isExactActive }">
            <button class="nav-item" :class="{ active: isExactActive }" @click="navigate">绩效考核</button>
          </router-link>
          <router-link to="/about" custom v-slot="{ navigate, isExactActive }">
            <button class="nav-item" :class="{ active: isExactActive }" @click="navigate">关于</button>
          </router-link>
        </nav>
      </div>
    </header>
    
    <main class="main">
      <router-view />
    </main>
    
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-links">
          <div class="footer-column">
            <h3>企业管理</h3>
            <ul>
              <li><router-link to="/">员工管理</router-link></li>
              <li><router-link to="/performances">绩效考核</router-link></li>
              <li><router-link to="/training-records">培训管理</router-link></li>
            </ul>
          </div>
          <div class="footer-column">
            <h3>系统服务</h3>
            <ul>
              <li><router-link to="/help-center">帮助中心</router-link></li>
              <li><router-link to="/privacy-policy">隐私政策</router-link></li>
              <li><router-link to="/terms-of-use">使用条款</router-link></li>
            </ul>
          </div>
          <div class="footer-column">
            <h3>关于我们</h3>
            <ul>
              <li><router-link to="/company-info">公司简介</router-link></li>
              <li><router-link to="/contact">联系方式</router-link></li>
              <li><router-link to="/join-us">加入我们</router-link></li>
            </ul>
          </div>
        </div>
        <div class="copyright">
          <p>&copy; 2024 员工管理系统. All rights reserved.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--app-header-height);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.header-content {
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-container h1 {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  transition: all var(--app-transition-speed) ease;
}

.nav-menu {
  display: flex;
  gap: 10px;
}

.nav-item {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 400;
  color: var(--app-text-color);
  opacity: 0.8;
  padding: 8px 12px;
  cursor: pointer;
  transition: all var(--app-transition-speed) ease;
  border-radius: 14px;
}

.nav-item:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.05);
}

.nav-item.active {
  color: var(--el-color-primary);
  font-weight: 500;
  opacity: 1;
  background-color: rgba(0, 113, 227, 0.1);
}

.main {
  flex: 1;
  margin-top: var(--app-header-height);
  padding: 40px 0;
}

.footer {
  background: var(--app-section-bg);
  padding: 40px 0 20px;
  color: var(--app-secondary-text);
}

.footer-content {
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}

.footer-column {
  flex: 1;
  min-width: 200px;
  margin-bottom: 20px;
}

.footer-column h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--app-text-color);
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li {
  margin-bottom: 10px;
}

.footer-column a {
  color: var(--app-secondary-text);
  text-decoration: none;
  font-size: 13px;
  transition: color var(--app-transition-speed) ease;
}

.footer-column a:hover {
  color: var(--el-color-primary);
}

.copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid var(--app-border-color);
  font-size: 12px;
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    height: auto;
    padding: 10px 24px;
  }
  
  .header {
    height: auto;
    position: sticky;
  }
  
  .nav-menu {
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .main {
    margin-top: 0;
  }
  
  .footer-links {
    flex-direction: column;
  }
  
  .footer-column {
    width: 100%;
  }
}
</style> 